<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 
    1. 定义一个组件 (全局组件)

      app.component('组件的名字', '组件的配置项')

        组件的配置项 - 就跟我们传递给 createApp 时的对象一样

    2. 使用组件
      
      将 组件名 当成自定义的标签使用即可

   -->

    <div id="app"></div>

    <script src="../lib/vue3.js"></script>
    <script>
      const app = Vue.createApp({
        // 根组件
        template: `
          <div>
            <h1>根组件</h1>
            <hello></hello>
            <say 
              v-for="item in persons" :key="item.id" :name="item.name" :age="item.age"
              @abcd="fn1"
              >
              
            </say>
          </div>
        `,

        data() {
          return {
            persons: [
              { id: 1, name: "张三", age: 18 },
              { id: 2, name: "里斯", age: 20 },
            ],
          };
        },

        methods: {
          fn1() {
            console.log("root fn1");

            this.persons[0].age++;
          },
        },
      });

      // 定义一个 hello 组件
      app.component("hello", {
        // 组件的模板
        template: `
          <button @click="add">我是 Hello 组件 - {{ count }}</button>
        `,

        data() {
          return {
            count: 1,
          };
        },

        methods: {
          add() {
            this.count++;
          },
        },
      });

      // 定义一个 say 组件
      app.component("say", {
        // 声明组件会接受到的 prop
        //    prop 数据与 data 数据类似，可以通过 this 访问到
        //    PS:
        //       1. prop 数据不允许修改
        //       2. 如果要修改的话，得通知父组件去修改
        props: ["name", "age"],

        template: `
          <p>{{ name }}, 你好。年龄是 {{ age }}</p>
          
          <button @click="increment">我加1</button>
        `,

        methods: {
          increment() {
            // 能获取到 prop 数据
            // console.log(this.age);

            // 能修改 prop 数据嘛？ 不能
            // this.age++;

            // 通过 $emit 这个实例方法触发一个自定义事件
            // this.$emit('事件名字', '要携带给事件处理函数的一些参数')

            this.$emit("abcd");
          },
        },
      });

      // 挂载应用
      app.mount("#app");
    </script>
  </body>
</html>
